<template>
  <view class="date-picker">
    <view class="date-wraper" @click="handleOpen">
      <text class="date-text">
        {{ dateShow }}
      </text>
      <up-icon v-if="!monthShow" name="arrow-down" color="#666" size="16rpx" />
      <up-icon v-else name="arrow-up" color="#666" size="16rpx" />
    </view>

    <!-- 月 -->
    <up-datetime-picker v-model="monthValue" :show="monthShow" mode="year-month" :item-height="50" :close-on-click-overlay="true" @confirm="handleMonthConfirm" @close="monthShow = false" @cancel="monthShow = false" />
  </view>
</template>

<script lang="ts" setup name="DatePicker">
import { ref } from 'vue';
import { formatMonth } from '@/utils';

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});

const emit = defineEmits(['setDate']);

const monthValue = ref(Date.now());
const monthShow = ref<boolean>(false);
const dateShow = ref<string>(formatMonth());

const handleMonthConfirm = (e: { value: number | string }) => {
  dateShow.value = formatMonth(e.value as string);
  monthShow.value = false;
  emit('setDate', dateShow.value);
};

const handleOpen = () => {
  monthShow.value = true;
};
</script>

<style lang="scss">
.date-picker {
  display: flex;

  .date-wraper {
    height: 40rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;

    .date-text {
      padding-right: 12rpx;
      font-size: 28rpx;
      color: #666666;
      font-weight: 500;
    }
  }

  .u-icon__icon {
    font-size: 18rpx !important;
  }

  .u-popup__content {
    border-radius: 24rpx !important;

    .u-toolbar {
      height: 156rpx !important;
      padding: 0 40rpx !important;

      .u-toolbar__wrapper__cancel {
        font-size: 30rpx !important;
        line-height: 30rpx !important;
        color: #999999 !important;
      }

      .u-toolbar__title {
        font-size: 36rpx !important;
        line-height: 36rpx !important;
        color: #1F2428 !important;
      }

      .u-toolbar__wrapper__confirm {
        font-size: 30rpx !important;
        line-height: 30rpx !important;
        color: #31C966 !important;
      }
    }

    .u-picker__view__column__item {
      font-size: 26rpx !important;
      color: #1F2428 !important;
    }
  }
}
</style>
